<script lang="ts">
import Vue from 'vue'
import { loadMicroApp } from 'qiankun'
export default Vue.extend({
  data () {
    return {
      microApp1: null as any
    }
  },
  mounted () {
    console.log('react')
    this.loadMicroApp()
  },
  methods: {
    loadMicroApp () {
      this.microApp1 = loadMicroApp({
        name: 'react',
        entry: '//localhost:3002',
        container: this.$refs.app1 as HTMLElement,
        props: { brand: 'qiankun' }
      })
    }
  },
  destroyed () {
    this.microApp1.unmount()
  }
})
</script>
<template>
  <div class="about">
    <h1>This is an React page</h1>
    <div ref="app1"></div>
  </div>
</template>
